<div id="subContainer" class="wrapper wrapper-content" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="signupForm">
                <div class="form-group">
                    <label class="col-sm-3 control-label">选项名称：</label>
                    <div class="col-sm-8">
                        <input id="firstname" name="firstname" class="form-control" type="text" v-model="args.name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">选项编码：</label>
                    <div class="col-sm-8">
                        <input id="lastname" name="lastname" type="text" aria-required="true"
                               aria-invalid="false" class="valid form-control" v-model="args.code">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">选项内容：</label>
                    <div class="col-sm-8">
                        <input id="username" name="username" type="text" aria-required="true"
                               aria-invalid="true" class="error form-control" v-model="args.value">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3">
                        <button type="button" class="btn btn-secondary" v-on:click="cancel()">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/js/validateIsMain.js"></script>
<script>
    new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/',
            args: {
                id: '',
                name: '',
                code: '',
                value: ''
            }
        },
        created: function () {
            this.loadEntity();
        },
        methods: {
            loadEntity() {
                var that = this;
                AJAX.GET('api/sysArgs/' + sessionStorage.getItem('editParams'), {}, function (resp) {
                    that.args = {
                        id: resp.data.id,
                        name: resp.data.name,
                        code: resp.data.code,
                        value: resp.data.value
                    };
                })
            },
            cancel: function () {
                this.backToMain();
            },
            save: function () {
                console.log($("#signupForm").valid());
                if (!$("#signupForm").valid()) {
                    return false;
                }
                var that = this;
                AJAX.PUT('api/sysArgs', JSON.stringify(this.args), function (resp) {
                    toastr.success(resp.msg);
                    that.backToMain();
                });
            },
            backToMain: function () {
                $.pjax({
                    url: mvm.applicationContextRootPath + 'pages/dict/index.html',
                    container: '.page-container'
                });
            }
        }
    });

    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                name: "required",
                code: "required",
                value: "required"
            },
            messages: {
                name: icon + "请输入选项名称",
                code: icon + "请输入选项编号",
                value: icon + "请输入选项内容"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function () {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });
    });
</script>
